<template>
	<div id="nav">
		<div class="container container-top">
			<nav class="navbar navbar-expand-lg navbar-light" style="height: 24px;">
				<router-link to="/" class="navbar-brand" href="#">
					<img src="../assets/images/logo.png" alt="" style="height: 24px;">
				</router-link>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent" style="height: 24px;">
					<ul class="navbar-nav mr-auto d-flex justify-content-center">
						<li class="nav-item active">
							<router-link to="/Creator" class="nav-link">Creator</router-link>
						</li>
						<li class="nav-item">
							<router-link to="/Brief" class="nav-link">Brief</router-link>
						</li>
					</ul>
					<ul class="d-flex justify-content-center">
						<li class="nav-item dropdown item">
							<a class="nav-link" ref="btna" :class="{'upload':flag1}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
							aria-haspopup="true" aria-expanded="false" @click="adda()">
								<img src="../assets/images/clock.png" alt="" style="height: 22px;">
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<!-- <a class="dropdown-item" href="#"></a> -->
								<p class="dropdown-item">你的request已经接受<img src="../assets/images/new.png" alt=""></p>
								<div class="dropdown-divider"></div>
							</div>
						</li>
						<!-- 下拉头像内容 -->
						<li class="nav-item dropdown item">
							<a class="nav-link" href="#" ref="btnb" :class="{'upload':flag2}" id="navbarDropdown" role="button" data-toggle="dropdown"
							aria-haspopup="true" aria-expanded="false" @click="add()">
								<img src="../assets/images/touxiang.png" alt="">
							</a>
							<div class="dropdown-menu dropdown-cont" aria-labelledby="navbarDropdown">
								<div class="dropdown-item d-flex align-items-center">
									<img src="../assets/images/touxiang.png" alt="">
									<div class="d-name pl-10">
										<h3 style="font-size: 14px;">FGTING</h3>
										<p class="txt"><span>1</span>menber</p>
									</div>
								</div>
								<div class="dropdown-divider"></div>
								<!-- 管理列表 -->
								<a class="dropdown-item item-img" href="#">
									<img src="../assets/images/Manage-team.svg" alt="">
									<span>Manage team</span>
								</a>
								<a class="dropdown-item item-img" href="#">
									<img src="../assets/images/Making-payments.svg" alt="">
									<span>Making payments</span>
								</a>
								<a class="dropdown-item item-img" href="#">
									<img src="../assets/images/Receiving.svg" alt="">
									<span>Receiving payments</span>
								</a>
								<a class="dropdown-item item-img" href="#">
									<img src="../assets/images/Create-workspace.svg" alt="">
									<span>Create a new workspace</span>
								</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item item-img" href="#">
									<img src="../assets/images/Account-Settings.svg" alt="">
									<span>Account Settings</span>
								</a>
								<a class="dropdown-item item-img" href="#">
									<img src="../assets/images/signout.svg" alt="">
									<span>Sign out</span>
								</a>

							</div>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#" style="padding-right: 0;">
								<img src="../assets/images/china.png" alt="">
							</a>

						</li>
						<li class="nav-item">
							<a class="nav-link" href="#" style="padding-left: 0;">
								<img src="../assets/images/meiguo.png" alt="">
							</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag1: false,
				flag2: false
			}
		},
		methods: {
			adda() {
				this.flag2 = false;
				this.flag1 = !this.flag1;
			},
			add() {
				this.flag1 = false;
				this.flag2 = !this.flag2
			}
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.pl-10{
		padding-left: 10px;
		padding-top: 5px;
		.txt{
			font-size: 11px;
			color: #999999;
		}
	}
	.navbar-collapse{
		background-color: #fff;
	}
	.dropdown-item span{
		font-weight: normal;
	}
	.item-img {
		span{
			font-size: 12px;
		}
		img{
			display: inline-block;
			width: 12.327px;
			height: 10.4px;
		}
	} 
	#nav {
		height: 84px;
		padding: 30px 0;
		border-bottom: none;
		position: fixed;
		/* margin-bottom: 90px; */
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 1000;
	}
	.container-top {
		height: 24px;
		line-height: 24px;
		padding: 0;
		img {
			display: inline-block;
			height: 100%;
		}
	}

	@media screen and (max-width: 375px) {
		.nav-item .nav-link {
			display: block;
			padding: .5rem 0rem;

			img {
				display: inline-block;
				height: 30px;
			}
		}
	}

	.nav {
		width: 100%;
	}

	.nav-item .nav-link {
		img {
			display: inline-block;
			height: 16px;
			padding-left: 5px;
		}
	}
	
	.item .nav-link img{
		height: 24px;
	}

	.dropdown-cont a img,
	.dropdown-cont a span {
		vertical-align: middle;
	}

	.dropdown-cont a span {
		padding-left: 5px;
	}

	.dropdown-menu {
		border: none;
		box-shadow: 3px 3px 7px rgba(0,0,0,.15);
	}
	.upload {
		width: 100%;
		height: 100%;
		background-color: #503C80;
		padding-left: 11px;
	}
</style>
